import { Layout } from "antd";
const { Header, Sider, Content } = Layout;
const layoutStyle = {
  borderRadius: 8,
  overflow: "hidden",
  width: "100%", // 修改宽度为100%
  height: "100vh", // 新增高度为100vh
};

const siderStyle: React.CSSProperties = {
  textAlign: "center",
  lineHeight: "120px",
  color: "#fff",
  backgroundColor: "gray",
  height: "100vh", // 新增高度为100vh
};

const headerStyle: React.CSSProperties = {
  textAlign: "center",
  color: "#fff",
  height: 64,
  paddingInline: 48,
  lineHeight: "64px",
  backgroundColor: "#fff",
};

const contentStyle: React.CSSProperties = {
  textAlign: "center",
  minHeight: "calc(100vh - 64px)", // 修改最小高度
  lineHeight: "120px",
  color: "#fff",
  backgroundColor: "#c5c5c5",
};
export default function DashboardLayout() {
  return (
    <Layout style={layoutStyle}>
      <Sider width="25%" style={siderStyle}>
        Sider
      </Sider>
      <Layout>
        <Header style={headerStyle}>Header</Header>
        <Content style={contentStyle}>Content</Content>
      </Layout>
    </Layout>
  );
}
